<template>
	<view class="table-box">
		<view class="flex align table-head between">
			<view class="table-ranking">排名</view>
			<view class="table-name">企业名称</view>
			<view class="table-price">入驻资金(元)</view>
			<view class="table-consume">消耗(元)</view>
			<view class="table-date">时间</view>
		</view>

		<view class="flex align table-item between" v-for="(v,i) in list" :key="i">
			<view class="table-ranking">
				<image v-if="v.rank==1" src="https://wx.2024csnl.com/static/business/home/home-jp1.png" mode="aspectFill" class="jp-icon" />
				<image v-else-if="v.rank==2" src="https://wx.2024csnl.com/static/business/home/home-jp2.png" mode="aspectFill"
					class="jp-icon" />
				<image v-else-if="v.rank==3" src="https://wx.2024csnl.com/static/business/home/home-jp3.png" mode="aspectFill"
					class="jp-icon" />
				<text v-else>{{v.rank}}</text>
			</view>
			<view class="table-name">{{v.title}}</view>
			<view class="table-price">{{v.money}}</view>
			<view class="table-consume">{{v.consume}}</view>
			<view class="table-date">{{setTime(v.createtime) }}</view>
		</view>
		<view class="flex-center addressImgBox" v-if="list.length==0">
			<image src="https://wx.2024csnl.com/static/noData.png"></image>
			暂无数据~
		</view>
		<view style="text-align: center;color: #999;" v-if="noMoreData&&list.length!=0">没有更多啦~</view>
	</view>
</template>

<script>
	import {
		getMonthlyList
	} from "../../api/index.js"
	export default {
		data() {
			return {
				list: [],
				pagenum: 1,
				noMoreData: false,

			}
		},
		onLoad() {
			this.onGetMonthlyList()
		},
		onReachBottom() {
			this.pagenum += 1
			this.onGetMonthlyList('bottom')
		},
		methods: {
			setTime(time) {
				return `${ time.substring(0,4)}/${time.substring(5,7)}/${time.substring(8,10)}`
			},
			async onGetMonthlyList(type) {
				const res = await getMonthlyList(`s=/ApiZwyRequest/shareholdranking&pagenum=${this.pagenum}`)
				const {
					data,
					status,
					msg
				} = res.data
				// console.log(res, "帮")
				if (status == 1) {
					type == 'bottom' ? this.list.push(...data) : this.list = data
					this.pagenum != 1 && data.length == 0 ? this.noMoreData = true : this.noMoreData = false
				} else {
					this.showToast(msg)
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	.addressImgBox {
		flex-direction: column;
		color: #999;
		padding-top: 20%;

		image {
			width: 400rpx;
			height: 400rpx;
		}
	}

	.table-box {
		padding: 20rpx;
	}

	.table-head {
		font-size: 24rpx;
		color: #CCCCCC;
		white-space: normal;
	}

	.table-item {
		font-size: 27rpx;
		color: #000;
		height: 100rpx;
		// height: 300rpx;

		.jp-icon {
			width: 48rpx;
			height: 48rpx;
			transform: translate(0, 16%);
		}
	}

	.table-ranking {
		width: 100rpx;
		text-align: center;

		text {
			color: #999999;
			font-weight: bold;
		}
	}

	.table-name {
		width: 120rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap
	}

	.table-price {
		width: 160rpx;
	}

	.table-consume {
		width: 110rpx;
	}

	.table-date {
		text-align: right;
		width: 160rpx;
	}
</style>
